<template>
	<view class="history-feedback">
		<view class="feedback-list" v-show="isFeedbackShow">
			<view class="feedback-item" v-for="(item, index) in feedbackList" :key="index">
				<view class="feedback-time">{{item.createTime}}</view>
				<view class="feedback-remark">
					<view class="feedback-remark-tip">问题反馈</view>
					<view class="feedback-remark-content">{{item.detail}}</view>
				</view>
				<view class="feedback-remark-imgs">
					<view class="feedback-remark-imgs-tip">图片</view>
					<view class="img-item" v-for="(iItem,iIndex) in item.imgs" :key="iIndex">
						<image class="img" :src="iItem.imgName" mode="aspectFill"></image>
					</view>
				</view>
			</view>
		</view>
		<view class="no-work-list-tip" v-show="!isFeedbackShow">
			<image class="no-data-img" src="../../static/no-data.png" mode="widthFix"></image>
			<p class="tips-text">无反馈记录</p>
		</view>
	</view>
</template>

<script>
	import apiRqs from "@/api/api-request.js";
	export default {
		data() {
			return {
				feedbackList: [],
				isFeedbackShow: true,
			}
		},
		onShow() {
			this.handleGetHistoryFeedback();
		},
		methods: {
			handleGetHistoryFeedback() {
				getApp().showLoading();
				let rqs = {
					"pageSize": 9999,
					"pageIndex": 1,
					"orderBy": ""
				};
				var that = this;
				apiRqs._getHistoryFeedbackList(rqs).then((res) => {
					uni.hideLoading();
					console.log('历史反馈记录', res);

					if (res.code == 200) {
						if (res.data.totalRecords == 0) {
							this.isFeedbackShow = false;
						} else {
							this.isFeedbackShow = true;
						}
						that.feedbackList = res.data.data;
					} else {
						getApp().showToast(res.msg);
					}
				}).catch((err) => {
					console.log('err', err);
				})
			},
		},
	}
</script>

<style lang="less">
	page {
		background-color: #f5f5f5;
	}

	.history-feedback {
		.no-work-list-tip {
			display: flex;
			align-items: center;
			flex-direction: column;
			font-size: 14px;
			color: #999;
			margin: 40px 0;
			.no-data-img{
				width: 120px;
				margin-top: 30px;
			}
			.tips-icon {
				font-size: 36px;
			}

			.tips-text {
				margin-top: 20px;
			}
		}

		.feedback-list {
			.feedback-item {
				background-color: #fff;
				margin-top: 10px;

				&:first-child {
					margin-top: 0;
				}

				.feedback-time {
					font-size: 13px;
					color: #666;
					padding: 8px 15px;
					box-sizing: border-box;
					border-bottom: 1px solid #f5f5f5;
				}

				.feedback-remark {
					padding: 10px 15px 20px 15px;
					border-bottom: 1px solid #f5f5f5;

					.feedback-remark-tip {
						font-size: 13px;
						color: #999;
					}

					.feedback-remark-content {
						min-height: 50px;
						max-height: 80px;
						overflow-y: auto;
						background: #f5f5f5;
						color: #333;
						font-size: 13px;
						padding: 10px;
						border-radius: 3px;
						margin-top: 10px;
					}
				}

				.feedback-remark-imgs {
					margin-top: 10px;
					padding: 0 15px 20px 15px;

					.feedback-remark-imgs-tip {
						font-size: 13px;
						color: #999;
					}

					.img-item {
						width: 70px;
						height: 70px;
						border-radius: 3px;
						margin-top: 10px;

						.img {
							width: 100%;
							height: 100%;
							border-radius: 3px;
						}
					}
				}
			}
		}
	}
</style>
